<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue组件开发</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h3>{{message}}</h3>
      <login></login>
      <user-list></user-list>
    </div>
  </body>
</html>
<script>
//     # 注意:
//  - 1.Vue.component用来开发全局组件 参数1: 组件的名称  参数2: 组件配置{}  template:''用来书写组件的html代码  template中必须有且只有一个root元素
//  - 2.使用时需要在Vue的作用范围内根据组件名使用全局组件
//  - 3.如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写加入-线进行使用
  // 创建全局的登录组件
  Vue.component("login", {
    template: `
                <div>
                    <h1>用户注册</h1>
                    <div>
                        <input type="text" placeholder="用户名">
                    </div>
                    <div>
                        <input type="password" placeholder="密码">
                    </div>
                    <div>
                        <button>登录</button>
                    </div>
                </div>`,
  });
  // 创建全局的用户列表组件
  Vue.component("userList", {
    template: `
            <div>
                <h1>用户列表</h1>
            </div>
    `,
  });
  var app = new Vue({
    el: "#app",
    data: {
      message: `
            组件化开发
            注意:
            - 1.Vue.component用来开发全局组件 参数1: 组件的名称  参数2: 组件配置{}  template:''用来书写组件的html代码  template中必须有且只有一个root元素
            - 2.使用时需要在Vue的作用范围内根据组件名使用全局组件
            - 3.如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写加入-线进行使用
      `,
    },
  });
</script>
